<template>
  <div class="nav-container">
    <nav class="nav-items">
      <a
        v-for="(item, index) in navItems"
        :key="index"
        href="#"
        class="nav-item"
        :class="{ active: activeIndex === index }"
        @click="setActive(index)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { defineProps } from 'vue'

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['select'])

// 定义导航项数组
const navItems = ref(props.list)

watch(
  () => props.list,
  (newVal) => {
    navItems.value = newVal
  }
)

// 存储当前激活的导航项索引
const activeIndex = ref(0)

// 切换激活状态的函数
const setActive = (index) => {
  activeIndex.value = index
  emit('select', index)
}
</script>

<style scoped lang="scss">
.nav-container {
  display: flex;
  justify-content: space-around;
  width: 1200px;
  height: 60px;
  background: #ffffff;
  border-radius: 12px 12px 12px 12px;
  margin: 10px auto;
}

.nav-items {
  display: flex;
  //   gap: 24px; // 每个导航项之间的间距
  color: #6b7280; // 默认文字颜色
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

.nav-item {
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  transition: color 0.3s;

  &:hover {
    color: rgba(22, 177, 58, 1); // 悬停时的颜色
  }

  &.active {
    color: rgba(22, 177, 58, 1); // 激活状态的颜色
  }
}
</style>
